<template>
  <div id="analysislist"> 


          <el-table :data="datalist" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
          :row-class-name="tableRowClassName"  :border="true" >
                <el-table-column label="注册时间"  align='center' width="200">                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.register_time }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="用户头像"  align='center' >                   
                    <template slot-scope="scope">       
                         <span v-if="scope.row.head_img">
                             <el-image 
                                style="width: 30px; height: 30px"
                                :src="urlimg + scope.row.head_img" 
                                :preview-src-list="scope.row.tx_picture" class="imga">
                            </el-image>
                        </span>
                        <span v-else>暂未上传</span>            
                    </template>
                </el-table-column>
                 <el-table-column label="账号"  align='center' width="150">                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                
                 <el-table-column label="用户名"  align='center'  width="150">                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="推荐人"  align='center' width="150px">                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.inviter">
                            <span style="display: flex;align-items: center;justify-content: center;">
                                {{ scope.row.inviter.telphone }}
                                <img src="@/assets/images/a9.png" style="width:18px;height:20px;margin-left:5px;" @click="goinforpersonal(scope.row,scope.row.inviter.telphone)"/>
                            </span>           
                        </span>
                        <span v-else>暂无</span>
                    </template>
                </el-table-column>
                     <el-table-column label="所属团队"  align='center' width="300px">                   
                    <template slot-scope="scope">    
                        <span v-if="scope.row.leader == null">-</span>               
                        <span v-else>{{ scope.row.leader.nickname }}-{{ scope.row.leader.telphone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="活跃次数"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.active_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="活跃天数"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.active_days }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="权限等级"  align='center'  width="400">                   
                    <template slot-scope="scope">                   
                        <span v-for="(a,b) in scope.row.manor_list" :key="b">          
                            <span v-if="a.into_direct_limit >= scope.row.direct_invite_count 
                                && a.into_invite_limit >= scope.row.power_child_count 
                                && a.into_experience_limit >= scope.row.power_experience ">
                                 <span style="padding:0px 5px;">{{ a.title }} </span>
                            </span>
                        </span>              
                    </template>
                </el-table-column>
                 <el-table-column label="访问次数"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.open_app_count }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="好友数"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.direct_invite_count }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="团队数"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.sub_invite_count }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="贡献度"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="性别"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.sex == 0"> -</span>
                        <span v-if="scope.row.sex == 1"> 男</span>
                        <span v-if="scope.row.sex == 2"> 女</span>
                    </template>
                </el-table-column>
                 <el-table-column label="年龄"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.age }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="职业"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.occupation }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="年收入"  align='center' width="150">                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.income }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="用户档案"  align='center' width="100">                   
                    <template slot-scope="scope">                   
                        <span>
                             <img src="@/assets/images/a9.png" style="width:18px;height:20px;margin-left:5px;" @click="goinforpersonal(scope.row,scope.row.telphone)"/>
                        </span>
                    </template>
                </el-table-column>
                
                 <el-table-column label="操作"  align='center' width="260px" fixed="right">                   
                    <template slot-scope="scope">                   
                      <el-button size="mini"  type="primary" class="button_class1" plain @click="but1(scope.row)">访问</el-button> 
                      <el-button size="mini"  type="primary" class="button_class2" plain @click="but2(scope.row)">记录</el-button> 
                      <el-button size="mini"  type="primary" class="button_class1" plain @click="but3(scope.row)">画像</el-button> 
                    </template>
                </el-table-column>



            </el-table>  


            <el-dialog title="访问" :visible.sync="mtk1"  width="500px" >

                <div class="title_box" style="margin-top:-30px;">
                      <div class="dian"></div>
                      <div class="title_name">用户信息</div>
                </div>
                <div class="box_top">
                    <div class="box_top_img">
                    <img :src="head_img" />
                    </div>
                    <div class="box_top_con">
                    <div class="box_top_name">{{ name }}</div>
                    <div class="box_top_id">ID:{{ card }}</div>
                    </div>
                </div>

                <div class="title_box" style="margin-top:10px;">
                      <div class="dian"></div>
                      <div class="title_name">添加访问记录</div>
                </div>

                 <el-form ref="form" label-width="80px" style="margin-top:10px;">  
                    <el-form-item label-width="0px" style="margin-left:10px;">
                        <el-input v-model="form.con" type="textarea" placeholder="请输入添加访问记录" style="width:100%;"></el-input>
                    </el-form-item>
                 </el-form>

                <div style="text-align: center;width:100%;">
                        <el-button type="primary" style="width:100px;margin-top:20px;background: #F5CF49;border:none;border-radius: 50px;" @click="but1_qr">确认访问</el-button>
                </div>
    
            </el-dialog> 


             <el-dialog title="记录" :visible.sync="mtk2"  width="600px" >
               
               <div style="height:400px;overflow-y: auto;margin-top:-30px;">
                   <div v-for="(item,index) in infor_data" :key="index">
                       <div class="title_box">
                        <div class="dian"></div>
                        <div class="title_name">{{ item.time }}</div>
                       </div>
                        <div class="con_con">
                           {{ item.content }}
                        </div>
                </div>
                 
                
                    
               </div>

               <div style="margin-top:20px;text-align: center;">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :page-size="10"  
                    layout="prev, pager, next, jumper"
                    :total="count">
                </el-pagination>
                </div>
            </el-dialog> 



     <el-dialog title="画像" :visible.sync="mtk3"  width="450px">
        <div style="width:100%;"> 

        <el-form ref="form"   label-width="70px" style="width:100%;">
              
              <!-- <el-form-item label="性别">
                    <el-input    v-model="mtk3_form.sex" placeholder="名称"></el-input>
              </el-form-item>  -->
               <el-form-item label="性别" >
                <el-select  v-model="mtk3_form.sex" placeholder="性别" style="width:100%;" >
                    <el-option  v-for="(item,index) in mtk3_form.sex_select" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
               </el-form-item>

              <el-form-item label="年龄">
                    <el-input    v-model="mtk3_form.age" placeholder="年龄"></el-input>
              </el-form-item> 
              <el-form-item label="职业">
                    <el-input    v-model="mtk3_form.occupation" placeholder="职业"></el-input>
              </el-form-item> 
              <el-form-item label="年收入">
                    <el-input    v-model="mtk3_form.income" placeholder="年收入"></el-input>
              </el-form-item>                   
            </el-form>

            <div style="text-align: center;width:50%;margin:auto;">
                <el-button type="primary" class="custom_color_button" style="width:80%;"  @click="but3_qr()">确认</el-button>
            </div>

        </div> 
    </el-dialog>


     

   </div>
</template>

<script>

export default {
   name: 'analysislist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     }
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        my_uid:'',

        mtk1:false,
        form:{
            con:''
        },

        mtk2:false,
        infor_data:[{"name":"aaaa"}],
        page:1,
        count:0,

        name:'',
        card:'',
        head_img:'',

        mtk3:false,
        mtk3_form:{
            sex:'',
            sex_select:[{"id":1,"name":'男'},{"id":2,"name":'女'}],
            age:'',
            occupation:'',
            income:'',
        },


    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 605
  },
  mounted (){
    
  },
  methods: {
     but1(row){
        this.my_uid = row.uid
        this.name = row.nickname
        this.card = row.telphone
        this.head_img = this.urlimg +  row.head_img
        this.mtk1 = true
     },
     but1_qr(){
         this.post("/business_management/addVisitLog", {
                uid:this.my_uid,
                content:this.form.con
            }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.my_uid = ''
                    this.mtk1 = false
                    this.$emit('up_list_fun')
                }else {
                this.open1(res.message,'warning')
                }

       })
     },
     but2(row){
        this.my_uid = row.uid
        this.mtk2 = true
        this.but2_fun()
     },
     but2_fun(){
          this.post("/business_management/listOfVisitLog", {
              uid:this.my_uid,
              page:this.page,
	         }).then(res => {
                this.count = res.result.count
                this.infor_data = res.result.list
                console.log(res)
          })
     },
     but3(row){
        this.my_uid = row.uid
        this.mtk3_form.sex = row.sex
        this.mtk3_form.age = row.age
        this.mtk3_form.occupation = row.occupation
        this.mtk3_form.income = row.income
        this.mtk3 = true
     },
     but3_qr(){
          this.post("/member/supplement", {
              uid:this.my_uid,
              sex:this.mtk3_form.sex,
              age:this.mtk3_form.age,
              occupation:this.mtk3_form.occupation,
              income:this.mtk3_form.income,
	         }).then(res => {
               if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.my_uid = ''
                    this.mtk3 = false
                    this.$emit('up_list_fun')
                }else {
                this.open1(res.message,'warning')
                }
          })
     },
   goinforpersonal(row,telphone){      
        this.$router.push({
          path: '/index/inforpersonal',
          query: {
            name:telphone,
          }
        })
     },
      handleCurrentChange(val) {
        this.page = val
        this.but2_fun()
        console.log(`当前页: ${val}`);
      }
  
  }
}
</script>


<style scoped>
    .title_box{
        display: flex;
        align-items: center;
        margin-top: 8px;
    }
    .dian{
        width: 8px;
        height: 8px;
        background: #F1C94A;
        border-radius:50%;
        margin-right: 8px;
    }
    .title_name{
        font-size: 14px;;
        font-weight: 400;
        color: #000000;
    }
    .box_top{
       display: flex;
       margin-top:20px;
    }
    .box_top_img{
        width:60px;
        height: 60px;
    }
    .box_top_img>img{
        width:100%;
        height:100%;
        border-radius:50%;
    }
    .box_top_con{
        margin-left:10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .con_con{
        background: #FAFBFC;
        border-radius: 6px;
        padding:10px 20px;
        margin-top: 8px;
    }
</style>